import {ref,onMounted,onUnmounted,reactive,toRefs} from 'vue'
function useMousePosition() {
    const X = ref(0)
    const Y = ref(0)
    const  reactiveDate = reactive({
        x: 0,
        y: 0
    })
    
    const torefsDate = toRefs(reactiveDate)
    const updateMouse = (e:MouseEvent)=> {
        X.value = e.pageX
        Y.value  =e.pageY
        reactiveDate.x = e.pageX
        reactiveDate.y = e.pageY
    }

    onMounted(()=> {
        document.addEventListener('click',updateMouse)
    })

    onUnmounted(()=> {
        document.removeEventListener('click',updateMouse)
    })

    return {
        X,
        Y,
        ...torefsDate
    }
}

export default useMousePosition